import { useState, useEffect } from 'react';
import { Link, useLocation,useNavigate} from 'react-router-dom';
import { Space } from 'react-vant';
import { ServiceO } from '@react-vant/icons';
import { getgoodsinfo, cartadd } from '../request/app';
import '../assent/less/detail.css'
import img2 from '../assent/img/coupon.png'

function Detail() {
    //详情列表
    let nav = useNavigate();
    let [goodsinfo, addGoodsinfo] = useState([])
    let id = useLocation().state.id
    let type = useLocation().state.type
    console.log(type);
    let userinfo = JSON.parse(localStorage.getItem('userinfo'))
    //挂载
    useEffect(() => {
        getgoodsinfo({
            id
        }).then(res => {
            // console.log(res);
            if (res.code !== 200) {
                alert(res.msg)
                return
            }
            goodsinfo = res.list
            addGoodsinfo(goodsinfo)
        })
    }, [])
    //添加购物车
    function addCart() {
        if (!userinfo) {
            alert('请先登录')
            nav('/login') 
            return
        }
        cartadd({
            uid:userinfo.uid,
            goodsid:id,
            num: 1,
            type
        }).then(res => {
            console.log(res);
            if (res.code !== 200) {
                alert(res.msg)
                return
            }
            alert('添加成功')
        }).catch(() => { })
    };
    function Back() {
        nav(-1)
    }
    return (
        <div>
            <div className='detail'>
                {/*------- 头部----- */}
                <header className='header'>
                    <div className='top'>
                        <span className="iconfont icon-fanhui" onClick={() => {
                            Back()
                        }}></span>
                        <p>商品详情</p>
                    </div>
                    <div className="nav">
                        <div className="ft">
                            <ul>
                                <li className="active"> 商品 </li>
                                <li className="bd"></li>
                                <li> 详情 </li>
                                <li> 评价 </li>
                                <li> 推荐 </li>
                            </ul>
                        </div>
                    </div>
                </header>
                {/* -------缩略图----- */}
                <div className="tp">
                    {
                        goodsinfo.map(item => {
                            return (
                                <div key={item.id}>
                                    <img src={item.img} alt="" />
                                    <em className="iconfont icon-fenxiang"> </em>
                                    <p>
                                        <span>8</span>
                                        <span>/</span>
                                        <span>8</span>
                                    </p>
                                </div>
                            )
                        })

                    }

                </div>
                {/* ----商品介绍及价格部分-- */}
                <div className="xq">
                    <img src={img2} alt="" className='coupon' />
                    <div className="jc">
                        {
                            goodsinfo.map(item => {
                                return (
                                    <div className="jg" key={item.id}>
                                        <p className='xs'>限时</p>
                                        <span>￥</span>
                                        <p className='price'>{item.price}</p>
                                        <s className='del'>￥{item.market_price}</s>
                                    </div>
                                )
                            })
                        }
                        <div className="sc">
                            <span className="iconfont icon-shoucang"></span>
                            <p>收藏</p>
                        </div>
                    </div>
                    <div className="zt">
                        {
                            goodsinfo.map(item => {
                                return (
                                    <div key={item.id}>
                                        <h3>{item.goodsname}</h3>
                                        <span>{item.description}</span>
                                        <p>11.11限时299元起</p>
                                    </div>
                                )
                            })
                        }
                        <div className="wz">
                            <span className='title'>此商品于2020-11-11,00点结束闪购特卖，品牌美妆闪购专场</span>
                            {/* <button>查看{'>'}</button> */}
                        </div>
                    </div>
                </div>
                {/* ------选项部分------- */}
                <div className="xx">
                    <ul>
                        {
                            goodsinfo.map(item => {
                                return (
                                    <li key={item.id}>
                                        <h3>已选</h3>
                                        <p> {item.goodsname}x 1</p>
                                        <span className="iconfont">{">"}</span>
                                    </li>
                                )
                            })
                        }

                        <em></em>
                        <li>
                            <h3>分期</h3>
                            <p>可选3/6/12期x 1</p>
                            <span className="iconfont">{">"}</span>
                        </li>
                        <em></em>
                        <li className="bj">
                            <h3>送至</h3>
                            <b className="iconfont icon-wxbdingwei"></b>
                            <div className="dc">
                                <p>北京市东城区 </p>
                                <a>该地区暂时缺货</a>
                            </div>
                            <span className="iconfont"> {'>'} </span>
                        </li>

                    </ul>
                </div>
                <div className="xu">
                    <ul>
                        <li>
                            <span className="iconfont icon-xuanzhong"></span>
                            <p>U商城自营</p>

                        </li>
                        <li>
                            <span className="iconfont icon-xuanzhong"></span>
                            <p>U商城发货</p>
                        </li>
                        <li>
                            <span className="iconfont icon-xuanzhong"></span>
                            <p>7天无理由退货</p>
                            <b> {'>'}</b>
                        </li>
                    </ul>
                </div>
                {/* --------详情图------ */}
                <div className="ct">
                    {
                        goodsinfo.map(item => {
                            return (
                                <div key={item.id}>
                                    <img className="a" src={item.img} alt="" />
                                </div>
                            )
                        })
                    }
                    <div></div>
                </div>
                {/* -- -----尾部部分  */}
                <div className="wb">
                    <ul>
                        <li>
                            <Space className='demo-icon' gap={20}>
                                <ServiceO className='kf' />
                            </Space>
                            <p className='p'>客服</p>
                        </li>

                        <li  >
                            <span className="iconfont icon-dianpu"></span>
                            <p>店铺</p>
                        </li>
                        <Link to={{
                            pathname: '/index/cart'
                        }} className='li'>
                            <span className="iconfont icon-gouwuche"></span>
                            <p>购物车</p>
                        </Link>
                        <li className="gw">
                            <span onClick={() => {
                                addCart()
                            }}>加入购物车</span>
                            <Link key={id} to={{
                                pathname: '/order',
                                state: {
                                   id  
                                }
                            }} className='p'>
                                立即购买
                            </Link>

                        </li>
                    </ul>
                </div>
            </div >
        </div>
    );
}
export default Detail